<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>欢迎</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            height: 40vh; /* 使用视口高度将容器高度设置为100% */
        }

        form {
            border: 1px solid #ccc; /* 表单边框示例 */
            padding: 20px;
            width: 600px; /* 表单宽度 */
            /* 字体大小 22px */
            font-size: 22px;
        }
    </style>
</head>
<body>
<h1>欢迎使用AI自动生成巡检报告系统</h1>
<div>
    <button onclick="show()" style="width: 200px;height: 50px">点击展示简介</button>
    <script>
        function show() {
            var x = document.getElementById("myIntroduce");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
</div>

<div id="myIntroduce" style="display: none;border: 3px solid black;">
    <P>系统巡检项目操作地址:</P>
    <P><a href="http://192.168.132.63:5200/">http://192.168.132.63:5200/</a></P>
</div>
<h1 style="text-align: center;"> 巡检报告配置</h1>
<div class="container">
    <form method="post" action="/params/uploadFiles">
        <label for="docxConfig">选择要上传的文件：
            <input type="file" id="uploadFile"/>
        </label>
        <p></p>
        <label for="docxConfig">巡检报告配置文件：</label>
        <select id="docxConfig" name="docxConfig" style="text-align: center">
        </select>
        <button id="uploadDocxConfig">上传</button>
        <button id="downloadDocxConfig">下载</button>
        <p></p>
        <label for="commandConfig">巡检命令配置文件：</label>
        <select id="commandConfig" name="commandConfig" style="text-align: center">
        </select>
        <button id="uploadCommandConfig">上传</button>
        <button id="downloadCommandConfig">下载</button>
        <p></p>
        <label for="fixedConfig">固定值参数配置文件：</label>
        <select id="fixedConfig" name="fixedConfig" style="text-align: center">
        </select>
        <button id="uploadFixedConfig">上传</button>
        <button id="downloadFixedConfig">下载</button>
        <p></p>
        <label for="AIConfig">AI配置文件：</label>
        <select id="AIConfig" name="AIConfig" style="text-align: center">
        </select>
        <button id="uploadAIConfig">上传</button>
        <button id="downloadAIConfig">下载</button>
        <p></p>
        <label for="cityConfig">选择城市配置文件：</label>
        <select id="cityConfig" name="cityConfig" style="text-align: center">
        </select>
        <button id="uploadCityConfig">上传</button>
        <button id="downloadCityConfig">下载</button>
        <p></p>
    </form>
</div>
</body>

<script>
    // 当文档加载完毕时执行
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/ConfigSelect/docx')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('docxConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));

        fetch('/ConfigSelect/command')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('commandConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

        fetch('/ConfigSelect/ai')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('AIConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

        fetch('/ConfigSelect/fixed')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('fixedConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

                .catch(error => console.error('Error:', error));

        // 发送GET请求到/citySelect
        fetch('/ConfigSelect/city')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('cityConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(cityfileParams => {
                        const option = document.createElement('option');
                        option.value = cityfileParams;
                        option.textContent = cityfileParams;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
    });
</script>


<script>
    // 确保文档完全加载后执行代码
    document.addEventListener('DOMContentLoaded', function () {
        // 给上传按钮添加点击事件监听器
        var uploadButtons = document.querySelectorAll('button[id^="upload"]');

        uploadButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                // 获取按钮的ID，以确定上传的类型
                var type = this.id.replace('upload', '');
                console.log("wend test:" + type)
                // 调用上传方法，传递参数
                uploadFiles(type);
            });
        });
    });

    // 给上传按钮添加点击事件监听器
    var downloadButtons = document.querySelectorAll('button[id^="download"]');

    downloadButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            // 获取按钮的ID，以确定上传的类型
            var type = this.id.replace('download', '');
            console.log("wend test:" + type)
            // 调用上传方法，传递参数
            downloadFile(type);
        });
    });

    // 下载文件的方法
    function downloadFile(type) {
        var filename = NaN;
        if (type === 'DocxConfig') {
            filename = document.getElementById('docxConfig').value;
        } else if (type === 'CommandConfig') {
            filename = document.getElementById('commandConfig').value;
        } else if (type === 'FixedConfig') {
            filename = document.getElementById('fixedConfig').value;
        } else if (type === 'AIConfig') {
            filename = document.getElementById('AIConfig').value;
        } else if (type === 'CityConfig') {
            filename = document.getElementById('cityConfig').value;
        } else {
            alert('请选择下载的文件');
        }
        console.log("wend test:" + filename)

        fetch('/params/download/' + type + "/" + filename, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
                .then(response => response.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                });
    }

    // 上传文件的方法
    function uploadFiles(type) {
        // 获取文件输入元素
        var fileInput = document.getElementById('uploadFile');
        console.log(type)
        // 确保文件输入元素被选中
        if (fileInput.files.length > 0) {
            // 调用form 提交方法
            var form = new FormData();
            form.append('file', fileInput.files[0]);
            form.append('type', type);
            fetch('/params/uploadFiles', {
                method: 'POST',
                body: form
            })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        alert(data.message);
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                    });

        } else {
            alert('请选择一个文件');
        }
    }
</script>
</html>